<template>
  <div id="distributionlist" v-cloak style=" position: relative;"> 

   
  

      <div class="demo" :style="{  height: dtheight + 'px' }" style="width:100%;">
            <el-form ref="form"  label-width="80px">  
                <el-row>                                 
                    <el-col :span="24" style="display:flex;margin-top:10px;">
                        <div class="mytitle_item" style="margin-bottom:20px;">
                          等级管理
                        </div>
                    </el-col>                          
                    <el-col :span="24" style="display:flex;margin-top:10px;align-items: center;" v-for="(item,index) in datalist" :key="index">
                        <el-form-item label="分值区间" label-width="" style="margin-bottom: 0px !important;">
                            <div style="display: flex;">
                                <el-input style="width:100px;" v-model="item.begin" placeholder=""></el-input>
                                <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                                <el-input  style="width:100px;"  v-model="item.end" placeholder=""></el-input>
                            </div>
                         </el-form-item> 
                         <el-form-item label="信用级别" label-width="" style="margin-bottom: 0px !important;">
                                <el-input style="width:100px;"  v-model="item.name" placeholder=""></el-input>
                         </el-form-item> 
                          
                           <div v-if="item.icon" @click="up_img_but(index)" ><img :src="urlimg + item.icon"  class="img" /> </div>
                           <div v-else  @click="up_img_but(index)"><img src="@/assets/images/login_bg1.png" class="img"  /> </div>

                           <i class="el-icon-delete" style="margin-left:20px;font-size:20px;color:#C0C4CC;"></i>
                     
                    </el-col>
                </el-row>
       
              <el-form-item label="" v-show="false" >  
                <el-upload                                                
                    action="uploadUrl"  
                    :show-file-list="false"   
                    :before-upload="beforeupload"
                    :http-request="ImgUploadSectionFile">
                        <el-button slot="trigger" size="small" type="primary" id="selectImg">选取文件</el-button>
                </el-upload>
            </el-form-item>
             
          </el-form>

            <div style="text-align: center;width:100%;position: absolute;bottom: 50px;left: 0;right: 0;">
                    <el-button type="primary" style="width:250px;margin-top:50px;background: #F5CF49;border:none;" @click="qr_but()">确认</el-button>
            </div>

    </div>

   </div>
</template>

<script>

export default {
   name: 'distributionlist',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        istrue:true,
        upindex:'',
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 245
    
  },
  mounted (){
     
  },
  methods: {
      pd_fun(){
        console.log(this.valuedata)
        let  length = this.datalist.length
        for(let i=0;i<length-1;i++){         
                if(this.datalist[i].end  != this.datalist[i+1].begin){
                    this.open1("断档了",'warning')
                    this.istrue = false
                    return false
                }else{
                    this.istrue = true
                } 
        }

   },
    qr_but(){
        
         this.$confirm('确认修改, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
         }).then(() => {

            this.pd_fun()
           if(this.istrue){
                this.post("/credit/editGrade", {
                    arr:this.datalist,
                }).then(res => {
                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.$emit('up_list_fun')
                    }else {
                    this.open1(res.message,'warning')
                }

                 })
           }
           
        }).catch(() => {
                
        });
    },
    up_img_but(index){
         this.upindex = index
         document.getElementById("selectImg").click();  
        
    },
     ImgUploadSectionFile(param){//图片上传    
     },
     beforeupload(file){   //重新写入上穿 需要点击确认上传与表单一起提交
           if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }            
            this.upimgpost("/image/uploadMultiple",file).then(res => {
                 console.log(this.datalist[this.upindex].icon)
                 this.datalist[this.upindex].icon =  res.result.url
           })

          return false;
    },

    
 
  }
}
</script>


<style scoped>
[v-cloak]{
    display: none;
}
.demo{
    overflow-y:auto;
    position: relative;
}
.mytitle{
    height: 35px;
}
.mytitle_item{
    display: flex;
    align-items: center;
   
}
.mytitle_item::before{
  content:'';
  width: 5px;
  height: 15px;
  background: #F5CF49;
  display: block;
   margin-right: 10px;
}
.tb_class{
    color:#F5CF49;
    font-size:30px;
    margin-top:5px;
    margin-left:15px;
    margin-right:15px;
  }
  .my_input>>>input{
      width: 300px;
  }
  .img{
      width: 40px;
      height: 40px;
      margin-left: 20px;
  }
</style>